﻿$(function () {
    echarts_1();
    // echarts_2();
    echarts_4();
    echarts_31();
    echarts_5();
    // echarts_6();

// AJAX
    function echarts_1() {
        // AJAX加载数据：异步的Javascript and xml
        xData = []
        yData = []
        $.ajax({
            type: 'post',                            // post请求
            url: '/gethouseprice',
            dataType: 'json',
            data: {},
            error: function (xhr, err) {
                alert('请求失败，请检查，' + err + '!')
            },
            success: function (data) {   // data是javascript的json格式
                for (i = 0; i < data.length; i++) {
                    xData[i] = data[i].city_name
                    yData[i] = Number.parseInt(data[i].price)
                }

                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('echart1'));

                option = {
                    //  backgroundColor: '#00265f',
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: xData,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            // rotate:50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            show: true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [
                        {
                            type: 'bar',
                            data: yData,
                            barWidth: '35%', //柱子宽度
                            // barGap: 1, //柱子之间间距
                            itemStyle: {
                                normal: {
                                    color: '#2f89cf',
                                    opacity: 1,
                                    barBorderRadius: 5,
                                }
                            }
                        }

                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        });
    }

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {

                    type: 'bar',
                    data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#27d08a',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }// !

    function echarts_5() {
        x5Data = []
        y5Data = []
        // 基于准备好的dom，初始化echarts实例
        $.ajax({
            type: 'post',                            // post请求
            url: '/gethouseareacount',
            dataType: 'json',
            data: {},
            function(xhr, err) {
                alert('请求失败，请检查，' + err + '!')
            },
            success: function (data) {
                for (i = 0; i < data.length; i++) {
                    x5Data[i] = data[i].area + 'm²'
                    y5Data[i] = data[i].number
                }
                var myChart = echarts.init(document.getElementById('echart5'));

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '0%',
                        top: '10px',
                        right: '0%',
                        bottom: '4%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: x5Data,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                                width: 1,
                                type: "solid"
                            },
                        },

                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 2,

                            show: false,
                            splitNumber: 20,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                            },
                        },
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLabel: {
                            //formatter: '{value} %'
                            // show: true,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                        }, axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: "rgba(255,255,255,.1	)",
                                width: 1,
                                type: "solid"
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(255,255,255,.1)",
                            }
                        }
                    }],
                    series: [{
                        name: '数量：间',
                        type: 'line',
                        areaStyle: {
                            normal: {}
                        },
                        data: y5Data
                    }],
                    dataZoom: {
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 15,//滚动条高度
                        start: 0,//滚动条开始位置（共100等份）
                        end: 99//结束位置（共100等份）
                    }
                };


                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }

        });

    }

    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        DData = []

        $.ajax({
            type: 'post',                            // post请求
            url: '/gethouseinfra',
            dataType: 'json',
            data: {},
            error: function (xhr, err) {
                alert('请求失败，请检查，' + err + '!')
            },
            success: function (data) {

                var myChart = echarts.init(document.getElementById('echart4'));
                option = {
                    tooltip: {
                        trigger: 'item',
                    },
                    legend: {
                        // stype: 'scroll',
                        orient: 'vertical',
                        show: true,
                        top: 'center',
                        right: 10,
                        itemWidth: 14,
                        itemHeight: 10,
                        itemGap: 20,
                        width: 600,
                        data: ['<30元/m²', '30-60元/m²', '60-90元/m²', '90-120元/m²', '>120元/m²'],
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    textStyle: {
                        color: '#fff',
                    },
                    radar: {
                        center: ['50%', '50%'],
                        radius: 100,
                        startAngle: 90,
                        nameGap: 16,
                        splitNumber: 4,
                        shape: 'polygon',
                        axisLine: {
                            show: true,
                            lineStyle: {
                                // color: '#564d8e',
                                width: 1,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                // color: '#4b476f',
                                //width: 1,
                            },
                        },
                        splitArea: {
                            show: true,
                            areaStyle: {
                                color: 'rgba(0, 0, 0,0)'
                            },
                        },
                        indicator: [
                            {
                                text: '生活',
                                max: 10
                            },
                            {
                                text: '学校',
                                max: 1
                            },
                            {
                                text: '娱乐',
                                max: 1
                            },
                            {
                                text: '医院',
                                max: 3
                            },
                            {
                                text: '交通',
                                max: 10
                            },
                        ],

                    },

                    series: {
                        name: '',
                        type: 'radar',
                        symbol: 'none',
                        areaStyle: {
                            emphasis: {
                                opacity: 0.2,
                            },
                        },
                        lineStyle: {
                            normal: {
                                width: 1,
                            },
                        },
                        data: data
                    }

                };
                myChart.setOption(option);
                window.addEventListener("resize", function () {
                    myChart.resize();
                });
            }
        });
    }

    function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));

        var dataStyle = {
            normal: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                //shadowBlur: 40,
                //shadowColor: 'rgba(40, 40, 40, 1)',
            }
        };
        var placeHolderStyle = {
            normal: {
                color: 'rgba(255,255,255,.05)',
                label: {show: false,},
                labelLine: {show: false}
            },
            emphasis: {
                color: 'rgba(0,0,0,0)'
            }
        };
        option = {
            color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
            tooltip: {
                show: true,
                formatter: "{a} : {c} "
            },
            legend: {
                itemWidth: 10,
                itemHeight: 10,
                itemGap: 12,
                bottom: '3%',

                data: ['浙江', '上海', '广东', '北京', '深圳'],
                textStyle: {
                    color: 'rgba(255,255,255,.6)',
                }
            },

            series: [
                {
                    name: '浙江',
                    type: 'pie',
                    clockWise: false,
                    center: ['50%', '42%'],
                    radius: ['59%', '70%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,
                    data: [{
                        value: 80,
                        name: '01'
                    }, {
                        value: 20,
                        name: 'invisible',
                        tooltip: {show: false},
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: '上海',
                    type: 'pie',
                    clockWise: false,
                    center: ['50%', '42%'],
                    radius: ['49%', '60%'],
                    itemStyle: dataStyle,
                    hoverAnimation: false,
                    data: [{
                        value: 70,
                        name: '02'
                    }, {
                        value: 30,
                        name: 'invisible',
                        tooltip: {show: false},
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: '广东',
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['39%', '50%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: 65,
                        name: '03'
                    }, {
                        value: 35,
                        name: 'invisible',
                        tooltip: {show: false},
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: '北京',
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['29%', '40%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: 60,
                        name: '04'
                    }, {
                        value: 40,
                        name: 'invisible',
                        tooltip: {show: false},
                        itemStyle: placeHolderStyle
                    }]
                },
                {
                    name: '深圳',
                    type: 'pie',
                    clockWise: false,
                    hoverAnimation: false,
                    center: ['50%', '42%'],
                    radius: ['20%', '30%'],
                    itemStyle: dataStyle,
                    data: [{
                        value: 50,
                        name: '05'
                    }, {
                        value: 50,
                        name: 'invisible',
                        tooltip: {show: false},
                        itemStyle: placeHolderStyle
                    }]
                },]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }// !

    function echarts_31() {
        var myChart = echarts.init(document.getElementById('fb1'));
        var attr = [{
            name: "是",
            unit: "元"

        }, {
            name: "否",
            unit: "无"
        }
        ]
        var xData = ["电梯", "采暖：自供暖", "用水：商水", "整租"];
        var lines = [
            [29, 26, 44, 25],
            [21, 25, 27, 32],
        ];
        var option = {
            // backgroundColor: '#010B7A',
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'none',
                padding: 5,
                formatter: function (param) {
                    console.log(param);
                    var resultTooltip = "<div style='background:rgba(50, 50, 50, 0.7);padding:5px;border-radius:3px;'>" +
                        "<div style='text-align:center;color: rgb(255,255,255)'>" + param[0].name + "</div>" +
                        "<div style='padding-top:5px;color: rgb(255,255,255)'>";
                    for (var i = 0; i < param.length; i++) {
                        resultTooltip +=
                            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + param[i].color.colorStops[0].color + ";'></span>" +
                            "<span style='color: rgb(255,255,255)'> " + param[i].seriesName + ": </span>" +
                            "<span style='color: rgb(255,255,255)'>" + param[i].value + "</span></span><span>" + attr[i].unit + "</span></br>"

                    }
                    resultTooltip += "</div>";

                    return resultTooltip
                }
            },
            grid: {
                left: '10%',
                top: '8%',
                right: '5%',
                bottom: '19%',
            },
            legend: {
                show: true,
                icon: 'circle',
                orient: 'horizontal',
                top: '0.5%',
                right: '8%',
                itemWidth: 18.5,
                itemHeight: 6,
                itemGap: 30,
                textStyle: {
                    // color: '#FFFFFF'
                    color: '#C9C8CD'
                }
            },
            xAxis: [{
                type: 'category',
                data: xData,
                axisLabel: {
                    show: true,
                    fontSize: 9,
                    textStyle: {
                        color: "#C9C8CD" //X轴文字颜色
                    },
                    formatter: function (value) {
                        var str = "";
                        str += value.substring(0, 4) + "\n";
                        str += value.substring(5, 10);
                        return str;
                    }
                },
                axisLine: {
                    show: false //不显示x轴
                },
                axisTick: {
                    show: false //不显示刻度
                },
                // boundaryGap: false,
                splitLine: {
                    show: true,
                    width: 0.08,
                    lineStyle: {
                        type: "solid",
                        color: "#03202E"
                    }
                },
                axisPointer: { //轴指示器
                    type: 'shadow',
                    z: 1,
                    shadowStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(18,155,249,0)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(18,155,249,1)' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        },
                        shadowColor: 'rgba(0, 0, 0, 0.2)',
                        shadowBlur: 5
                    }
                },

            }],
            yAxis: [{
                type: 'value',
                // scale: true, //坐标轴起点不限制0
                axisLabel: {
                    show: true,
                    textStyle: {
                        fontSize: 9,
                        color: "#C9C8CD" //X轴文字颜色
                    }
                },
                splitLine: {
                    show: false,

                },
                axisTick: {
                    show: false, //不显示刻度
                },
                axisLine: {
                    show: false,
                },
                nameTextStyle: {
                    color: "#FFFFFF"
                },
                splitArea: {
                    show: false
                }
            }],
            series: [

                {
                    name: '是',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#A35AE0'
                            }, {
                                offset: 1,
                                color: '#6830E7'
                            }]),
                            barBorderRadius: 11,
                        }
                    },
                    data: lines[0]
                },
                {
                    name: '否',
                    type: 'bar',
                    barWidth: '15%',
                    itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#66FF66'
                            }, {
                                offset: 1,
                                color: '#00CA98'
                            }]),
                            barBorderRadius: 11,
                        }

                    },
                    data: lines[1]
                }
            ]
        };
// 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }


})



		
		
		


		









